<template>
  <div>
    <el-dialog v-model="dialog" title="释放到公海" width="740">
      <div class="dialog">
        <div class="left">
          <div class="title">该客户释放到公海的历史记录</div>
          <div class="list">
            <div style="display: flex" v-for="(item, index) in 30" :key="index">
              <div class="dot-wrapper">
                <div class="dot" :class="[current > index && 'active']"></div>
                <!-- v-if要用具体的变量长度length撒 如果是灵活的根据接口响应的数据渲染条数就要写动态的 不然就可以直接写死 -->
                <div
                  class="dot-bar"
                  :class="[current > index + 1 && 'active']"
                  v-if="index < 29"
                ></div>
              </div>
              <div style="padding-bottom: 29px; flex: 1">
                <div class="date">2025-03-05 09:46:18</div>
                <div style="color: #333333; font-size: 13px">
                  客户不认同公司助贷产品
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="title">当前释放到公海原因</div>
          <div class="radio">
            <el-radio-group v-model="radio">
              <el-radio value="1" size="large">选择常见原因</el-radio>
            </el-radio-group>
            <div>
              <el-form :model="form" label-width="90">
                <el-form-item label-position="top">
                  <el-select
                    v-model="form.region"
                    placeholder="请选择"
                    @focus="selectFocus"
                  >
                    <el-option label="Zone No.1" value="shanghai" />
                    <el-option label="Zone No.2" value="beijing" />
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
            <el-radio-group v-model="radio">
              <el-radio value="2" size="large">自定义原因</el-radio>
            </el-radio-group>
            <div>
              <el-form :model="form" label-width="90">
                <el-form-item label-position="top">
                  <el-input
                    placeholder="请输入"
                    v-model="form.phone"
                    autocomplete="off"
                    show-word-limit
                    maxlength="30"
                    style="width: 100%"
                    type="textarea"
                    @focus="inputFocus"
                  />
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="dialogFollowup = false">
            确定
          </el-button>
          <el-button @click="dialogFollowup = false">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
const dialog = ref(false);
const current = ref(1);
const radio = ref("1");
const form = reactive({
  name: "",
  region: "",
  date1: "",
  date2: "",
  delivery: false,
  type: [],
  resource: "",
  desc: ""
});
function selectFocus() {
  radio.value = "1";
}
function inputFocus() {
  radio.value = "2";
}
</script>

<style scoped lang="scss">
// :deep(.el-radio-group){
// 	display: inline-grid !important;

// }
.dialog {
  display: flex;
  height: 600px;
  .title {
    font-size: 12px;
    font-weight: bold;
    color: #000;
    margin-bottom: 40px;
  }
  .left {
    background: #f7f8fa;
    width: 280px;
    padding: 15px 0 15px 15px;
    border: 1px solid #f1f1f1;
  }
  .right {
    padding: 15px;
    width: 420px;
    border: 1px solid #f1f1f1;
  }
  .list {
    height: 500px;
    overflow-y: scroll;
    .dot-wrapper {
      margin-right: 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      --active-color: #409eff;
      --inactive-color: #dfe1e6;
    }
    .dot {
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background-color: var(--inactive-color);
      &.active {
        background-color: var(--active-color);
      }
    }
    .dot-bar {
      flex: 1;
      width: 2px;
      height: 100%;
      background-color: var(--inactive-color);
      &.active {
        background-color: var(--active-color);
      }
    }
    .date {
      color: #999999;
      margin-bottom: 6px;
      font-size: 13px;
    }
    .radio {
    }
  }
}
</style>
